<template>
    <el-main>
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>SEO设置</span>
                </div>
            </template>
            <el-form :model="seoModel" ref="seoRef" :rules="seoRules" label-width="100px" :inline="false"
                class="seo_form">
                <el-form-item label="SEO标题" prop="title">
                    <el-input v-model="seoModel.title"></el-input>
                </el-form-item>
                <el-form-item label="LOGO" prop="logo">
                    <el-upload class="avatar-uploader" :action="qiniuApi" :show-file-list="false" :data="pic.qiniuToken"
                        :on-success="handleAvatarSuccess" :on-progress="handlePreview"
                        :before-upload="beforeAvatarUpload" :on-error="handleError">
                        <img v-if="seoModel.logo" :src="seoModel.logo" class="avatar">
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item v-if="percentage">
                    <el-progress :percentage=percentage />
                </el-form-item>
                <el-form-item label="关键字" prop="keywords">
                    <el-input v-model="seoModel.keywords" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="seoModel.description" type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveSEO">保存</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </el-main>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { ElMessage, ElForm } from "element-plus"
import { Plus } from '@element-plus/icons-vue'
import type { UploadFile, UploadFiles, UploadProps, UploadProgressEvent } from 'element-plus'

import { getQiniuTokenApi, getSeoApi, postSeoApi } from '@/http/api/site'
import { qiniuCDN, qiniuApi } from '@/http'

// 表单绑定数据
const seoModel = reactive({
    title: '',
    logo: '',
    keywords: '',
    description: ''
})
// 表单ref属性
const seoRef = ref<InstanceType<typeof ElForm>>()
// 表单验证规则
const seoRules = reactive({

})
// 保存
const saveSEO = () => {
    seoRef.value?.validate((valid: boolean) => {
        if (valid) {
            postSeoApi(seoModel).then(res => {
                if (res && res.code == 202) {
                    ElMessage.success('保存成功!')
                    percentage.value = 0
                }
            })
        }
    })
}
// 获取seo信息
const getSeoInfo = async () => {
    await getSeoApi().then(res => {
        if (res && res.code == 200) {
            Object.keys(seoModel).forEach(key => {
                seoModel[key] = res.data[key]
            })
        }
    })
}
// 图片
const pic = reactive({
    qiniuToken: {}
})
// 获取七牛token
const getQiniuToken = async () => {
    await getQiniuTokenApi().then(res => {
        if (res && res.code == 200) {
            pic.qiniuToken = res.data
        }
    })
}
// 上传之前
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    const imgType = ['image/jpeg', 'image/png']
    if (imgType.indexOf(rawFile.type) == -1) {
        ElMessage.error('请勿上传图片以外的其他文件!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 1) {
        ElMessage.error('请勿上传大于1M的图片!')
        return false
    }
    return true

}
// 进度条
const percentage = ref(0)
// 上传时
const handlePreview: UploadProps['onProgress'] = (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    percentage.value = (evt.loaded / evt.total * 100) | 0
}
// 图片上传成功后
const handleAvatarSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    seoModel.logo = qiniuCDN + response.key
}
// 上传失败后
const handleError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    ElMessage.error('上传失败,请重新上传!')
}

onMounted(() => {
    getSeoInfo()
    getQiniuToken()
})

</script>

<style scoped lang='scss'>
.seo_form {
    width: 600px;

    :deep(.avatar-uploader) {
        .el-upload {
            border: 1px dashed #dcdfe6;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: .2s;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #3375b9;
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 50px;
            height: 50px;
            text-align: center;
        }

        img {
            max-height: 100px;
        }

    }

    :deep(.el-progress--line) {
        width: 80%;
    }
}
</style>